import React, {
  useRef,
  useState,
  useEffect,
  useReducer,
  RefObject,
} from "react";
import 'antd/dist/antd.css';
import VideoComponent from "./VedioComponent";
import { Col, Row, Slider, Divider,Layout, Button,InputNumber } from 'antd';
import { StepBackwardOutlined ,AudioOutlined,AudioMutedOutlined, VideoCameraOutlined,DesktopOutlined,
  UserAddOutlined,UsergroupAddOutlined,CommentOutlined,
  FileTextOutlined,AppstoreOutlined

} from '@ant-design/icons';
// @ts-ignore
import   VedioRtc from "./components/VedioRtc"; 

import "./index.css";
const { Header, Footer, Sider, Content } = Layout;
const antdstyle: React.CSSProperties = { background: '#0092ff', padding: '8px 0' };
type State = { count: number; gridCount: number };
type Action =
  | { type: "increment"; payload: number }
  | { type: "decrement"; payload: number }
  | { type: "setGridCount"; payload: number };
function reducer(state: State, action: Action): State {
  let newState;
  switch (action.type) {
    case "increment":
      newState = { ...state, count: action.payload };
      break;
    case "decrement":
      newState = { ...state, count: action.payload };
      break;
    case "setGridCount":
      newState = { ...state, gridCount: action.payload };
      break;
    default:
      throw new Error();
  }
  console.log("newState:::",newState);
  return newState;
}
// function incrementAction(): Action {
//    return { type: "increment" };
// }
// function decrementAction(): Action {
//   return { type: "decrement" };
// }
function setGridCountAction(newGridCount: number): Action {
  return { type: "setGridCount", payload: newGridCount };
}
type AppProps = {
  amount: number;
  handleRefresh: () => void;
  handleAmountChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
};
//普罗米修斯 prometheus
function App({ amount,handleRefresh, handleAmountChange}: AppProps) {
  
  const [state, dispatch] = useReducer(reducer, { gridCount:  amount, count: 0 });
  //  const [gridCount, setGridCount] = useState(25);
  const videoRefs: RefObject<HTMLVideoElement>[] = Array(state.gridCount)
    .fill(0)
    .map(() => useRef<HTMLVideoElement>(null));
  const buttonNames: string[] = ["Home", "About", "Contact", "Help"];
  // const [state, dispatch] = useReducer(reducer, { count: 0 });

  useEffect(() => {
    // 在这里执行需要在组件挂载或更新时执行的操作
    // 例如加载视频
    videoRefs.forEach((videoRef) => {
      if (videoRef.current) {
        videoRef.current.load();
      }
    });
    // alert(state.gridCount)
  }, [videoRefs,state.gridCount]);
  // useEffect(() => {
  //   const max:number = 25;
  //   const timer = setInterval(() => {
  //      if(gridCount<max){
  //         setGridCount(gridCount => gridCount + 1);
  //         alert(gridCount);
  //      }
  //     setGridCount(prevCount => prevCount < 25 ? prevCount + 1 : prevCount);
  //   }, 2000);

  //   return () => {
  //     clearInterval(timer);
  //   };
  // }, []);
  const screenWidth = window.innerWidth; // 获取屏幕宽度
let videoWidth = 200; // 每个视频的宽度 amount
/*
9
10
11
*/
//  // 计算每个视频的宽度
let columnCount = 3; // 计算列数
  if(state.gridCount<9){
    columnCount=3
  } else if(state.gridCount<16){
    columnCount=5;
  }  else if(state.gridCount<=25){
    columnCount=7;
  }  else if(state.gridCount<=35){
    columnCount=9;
  } else if(state.gridCount>36){
    columnCount=12;
  }
  videoWidth= Math.floor(screenWidth * 0.9 / columnCount);
  return (
    <Layout style={{position:'fixed' , top:0, left:0}}>
      
       {/* <Divider orientation="left"> </Divider> */}
       <Header  > 
  <input style={{maxHeight:30}} type="number" value={amount} onChange={(e)=>handleAmountChange(e)} />
  <Button onClick={()=>handleRefresh()}>强制刷新</Button>
</Header>
       <Content>
        <h1 style={{ textAlign: "center", fontFamily: "serif", fontSize: 12 }}>
        腾讯会议
      </h1>
      <div id="25gongge" style={{ display: "flex", flexDirection: "row" }}>
        <button
          className="side-button"
          // onClick={() => dispatch.setGridCount(15)}
          onClick={() =>dispatch(setGridCountAction(25)) }
        >
          +
        </button>
        <div className="grid"  
         style={{ gridTemplateColumns: `repeat(${columnCount}, 1fr)` }}
        >
          {videoRefs.map((videoRef, index) => (
            <div 
            style={{ position: "relative", backgroundColor: "#000000" }}
            
            >
               <VideoComponent index={index} />
              <div className="host-label">
                <span>主持人:</span>
                <span> 姓名</span>
              </div>
            </div>
          ))}
        </div>
        <button
          className="side-button"
          onClick={() =>dispatch(setGridCountAction(15)) }
        >
          -
        </button>
      </div>
       </Content>
       <Footer> 

       <div className="button-bar">
        {/* {buttonNames.map((name, index) => (
        
         
        ))} */}
      
          <div>
            <AudioOutlined />
            <div>静音</div>
            
          </div>
          <div>
            <VideoCameraOutlined />
            <div>停止视频</div>
            
          </div>
          <div>
            <DesktopOutlined />
            <div>共享屏幕</div>
            
          </div>
          <div>
          <UserAddOutlined />    
            <div>邀请</div>
            
          </div>
          <div>
          <UsergroupAddOutlined />
            <div>管理成员</div>
            
          </div>
          <div>
            <CommentOutlined />
            <div>聊天</div>
            
          </div>
          <div>
          <FileTextOutlined />
            <div>会议文档</div>
            
          </div>
          <div>
          <AppstoreOutlined />
            <div>设置</div>
            
          </div>
      </div>
       </Footer>
    
    </Layout>
  );
}

export default App;
